<template>
  <div class="control">
    <div
      class="tools"
      :class="{ active: satelliteVisible }"
      @click="handleSatellite"
    >
      <i class="iconfont icon-weixing_GPS"></i>
      <span>卫星</span>
    </div>
    <el-divider direction="vertical" border-style="dashed" />

    <div class="tools" :class="{ active: roadsVisible }" @click="handleRoads">
      <i class="iconfont icon-honglvdeng"></i>
      <span>路况</span>
    </div>
    <el-divider direction="vertical" border-style="dashed" />

    <div
      class="tools"
      id="measure"
      :class="{ active: measureVisible }"
      @click="handleMeasure"
    >
      <i class="iconfont icon-chizi_o"></i>
      <span>测距</span>
    </div>
    <el-divider direction="vertical" border-style="dashed" />
    <div class="tools" id="subway" @click="openSubway">
      <i class="iconfont icon-dibudaohanglan-"></i>
      <span>地铁</span>
    </div>
    <el-divider direction="vertical" border-style="dashed" />
    <div class="tools" @click="handleZoom">
      <i class="iconfont icon-quanping"></i>
      <span>全屏</span>
    </div>
  </div>
  <transition name="slide">
    <div v-if="showSelect" class="satellite-select">
      <el-checkbox v-model="checked" @change="handleNet">路网</el-checkbox>
    </div>
  </transition>
  <div id="loginbox"><img src="/img/touxiang.png" alt="" /></div>
</template>
<script setup>
import { inject, ref, onMounted, onUnmounted } from 'vue'
const mapRef = inject('map')

const satelliteVisible = ref(false)
const showSelect = ref(false)
const checked = ref(true)

const roadsVisible = ref(false)

const measureVisible = ref(false)

const isFullscreen = ref(false)

let satellite = null
let roadNet = null
let ruler = null
let traffic = null

onMounted(() => {
  document.addEventListener('fullscreenchange', onFullscreenChange)
})
onUnmounted(() => {
  document.removeEventListener('fullscreenchange', onFullscreenChange)
})

const onFullscreenChange = () => {
  isFullscreen.value = !!document.fullscreenElement
}

function handleSatellite() {
  satelliteVisible.value = !satelliteVisible.value
  showSelect.value = !showSelect.value
  const map = mapRef?.value

  if (!satellite) {
    satellite = new AMap.TileLayer.Satellite()
    roadNet = new AMap.TileLayer.RoadNet()
    map.addLayer(satellite)
    map.addLayer(roadNet)
  }
  if (!satelliteVisible.value) {
    satellite.hide()
    checked.value = true
  } else {
    satellite.show()
    roadNet.show()
  }
}
function handleNet() {
  const map = mapRef?.value
  if (!map) return

  if (checked.value) {
    if (!roadNet) {
      roadNet = new AMap.TileLayer.RoadNet()
      map.addLayer(roadNet)
    } else {
      roadNet.show()
    }
  } else {
    if (roadNet) {
      roadNet.hide()
    }
  }
}
function handleRoads() {
  const map = mapRef?.value
  roadsVisible.value = !roadsVisible.value
  if (!map) return
  if (!traffic) {
    traffic = new AMap.TileLayer.Traffic({
      autoRefresh: true, //是否自动刷新，默认为false
      interval: 180, //刷新间隔，默认180s
    })
    map.add(traffic)
  }
  if (roadsVisible.value) {
    traffic.autoRefresh = true
    traffic.show() //显示路况图层
  } else {
    traffic.hide()
    traffic.autoRefresh = false
  }
}
function handleMeasure() {
  measureVisible.value = !measureVisible.value
  if (measureVisible.value) {
    if (!ruler) {
      const map = mapRef?.value
      if (!map) return
      map.on('dblclick', (e) => {
        map.clearEvents()
      })
      if (!ruler) ruler = new AMap.RangingTool(map)
      ruler.turnOn()

      console.log(ruler, '测距开启')
    }
  } else {
    ruler.turnOff(true)
    const map = mapRef.value
    map.clearEvents()
    console.log(ruler, '测距关闭')
  }
}
function openSubway() {
  window.open('https://map.amap.com/subway/index.html?&4201', '_blank')
}
function handleZoom() {
  const element = document.getElementById('container')
  if (!isFullscreen.value) {
    if (element.requestFullscreen) {
      element.requestFullscreen()
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen()
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen()
    }
  }
}
</script>
<style scoped>
@import 'http://at.alicdn.com/t/c/font_4989319_7okbm5cgvw6.css';
.control {
  position: fixed;
  top: 10px;
  right: 80px;
  background-color: rgba(255, 255, 255, 0.9);
  color: #5f6477;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 12px 12px;
  display: flex;
  align-items: center;
  font-size: 14px;
  user-select: none; /* 禁止选中 */
  z-index: 999;
}

.tools {
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.3s;
}

.tools:hover {
  color: #a8a8a8;
}
.active {
  color: #409eff;
}

.satellite-select {
  position: fixed;
  top: 15px;
  right: 450px;
  background-color: rgba(255, 255, 255, 0.9); /* 白色半透明背景 */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 阴影增强立体感 */
  padding: 2px 10px;
  align-items: center;
  font-size: 14px;
  z-index: 999; /* 保证浮在地图之上 */
}

.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
.slide-enter-to,
.slide-leave-from {
  opacity: 1;
  transform: translateX(0);
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}
#loginbox {
  position: fixed;
  z-index: 115;
  top: -8px;
  right: 5px;
}
#loginbox img {
  transform: scale(0.5);
}
</style>
